<!-- 广告位 -->
<template>
    <el-row>
        <el-col v-for="(item, index) in carouselData" :key="index" :span="4" :offset="index > 0 ? 2 : 0">
            <el-card :body-style="{ padding: '5px' }" style="width: 265px; margin-bottom:20px;margin-right: 60px; cursor: pointer;" @click="goBackcoudetails(item.courseId)">
                <img :src="item.courseCover" class="imageaaa" /> <!-- 假设每个对象有一个imageUrl属性 -->
                <div style="padding: 14px;text-align: center;height: 40px;">
                    <span class="crousename">{{ item.courseName }}</span>
                    <!-- 假设每个对象有一个title属性 --> 
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>
  
<script>
import { ref, onMounted } from 'vue'
import { reactive, toRefs } from "@vue/reactivity";
import { ElMessage } from "element-plus";
import axios from '../api/index';
import router from '@/router';


export default {
    setup() {
        const carouselData = ref([]);

        //发起请求返回热销的数据
        onMounted(async () => {
            try {
                const response = await axios.get('/course/findHotCourses');
                if (response.code === 200) {
                    console.log(response.data);
                    carouselData.value = response.data;
                }
            } catch (error) {
                ElMessage.error("臣妾未能请求到数据，给客官赔罪啦~~");
            }
        });

        function goBackcoudetails(Item) {
            router.push("/productChild/" + Item)
        }

        return {
            goBackcoudetails,
            carouselData,
        };

    },
}

</script>
  
<style>
.imageaaa {
    width: 253px;
    height: 130px;
    display: block;
}
.crousename{
    font-size: 16px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(0, 0, 0);
}
</style>
  